interview

home / developersection / interviews / what are templates in knockout.js?

Ask Question
ICSM Computer

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Follow
Can you answer this question?
Answer

1 Answers

ICSM Computer

ICSM Computer

23-Apr-2025

Templates are a powerful feature in Knockout.js, especially when you want to render dynamic or reusable HTML content based on your data. Let's understand this

Templates in Knockout.js let you define pieces of HTML that are rendered dynamically using your view model data.

They're most useful when:

  1. You're displaying repeating structures (like cards or rows).
  2. You want to reuse markup.
  3. You want more control over how sections of your UI are rendered.

Basic Syntax

<!-- Your template -->
<script type="text/html" id="person-template">
  <div>
    <strong data-bind="text: name"></strong>
    <span data-bind="text: age"></span>
  </div>
</script>

<!-- Where the template will be used -->
<div data-bind="template: { name: 'person-template', data: selectedPerson }"></div>

Template Binding Properties

Property Description
name The ID of the <script> template
data The data context passed to the template
foreach Used to repeat the template over a list
if / ifnot Conditionally render the template

Example: Template with foreach

<script type="text/html" id="fruit-template">
  <li data-bind="text: name"></li>
</script>

<ul data-bind="template: { name: 'fruit-template', foreach: fruits }"></ul>

function ViewModel() {
  this.fruits = ko.observableArray([
    { name: "Apple" },
    { name: "Banana" },
    { name: "Cherry" }
  ]);
}

ko.applyBindings(new ViewModel());

fruits is an array of objects, and each object gets passed into the template as $data.

Using Anonymous Templates (inline HTML)

<div data-bind="template: { foreach: items }">
  <p data-bind="text: $data"></p>
</div>

No need for an external <script> tag. This is useful for quick layouts!

Inside Templates, You Can Use:

  1. $data, $parent, $root
  2. Regular bindings like text, click, visible, etc.
  3. templateOptions for more complex use cases

Bonus: Switch templates dynamically

<!-- two template definitions -->
<script type="text/html" id="admin-template">Admin: <span data-bind="text: name"></span></script>
<script type="text/html" id="user-template">User: <span data-bind="text: name"></span></script>

<!-- render different template based on role -->
<div data-bind="template: { name: templateName, data: person }"></div>

this.templateName = ko.computed(() => {
  return this.person().role === "admin" ? "admin-template" : "user-template";
});

Summary

Concept Description
template binding Renders HTML based on a view model
name Refers to a script template by ID
data Data context to use in the template
foreach Loops through an array to render items
Inline templates Supported using anonymous binding containers

 

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy